<style scoped="scoped">

</style>
<template>
    <el-dialog :title="dialog.title" v-model="dialog.show" :center="true" width="25%">
        <el-form
            class="form" ref="tableEdit" :model="form" :rules="rules"
            :status-icon="true" label-width="100px"
        >
            <el-form-item label="表名（EN）" prop="ename">
                <el-input v-model="form.ename" :disabled="dialog.type === 1"/>
            </el-form-item>
            <el-form-item label="表名（ZH）" prop="cname">
                <el-input v-model="form.cname"/>
            </el-form-item>
            <el-form-item label="版本号" prop="version">
                <el-input v-model="form.version"/>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submit()">提交</el-button>
                <el-button @click="show(false)">取消</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
</template>
<script>
import { ref, getCurrentInstance } from 'vue'
export default {
    name: "TableEdit",
    emits: ["search"],                      // 声明事假，不声明会有警告
    setup(prop, context) {

        let { ctx } = getCurrentInstance(); // 当前组件上线文
        let dialog = ref({
            title: '',                      // 弹框标题
            show: false,                    // 弹框是否展示
            type: 0                         // 弹框类型，新增：0、修改：1
        });
        let form = ref({});                 // 表单数据对象
        let rules = {                       // 表单验证规则
            ename: [
                {"validator": ctx.$rules.strBlank, trigger: 'blur', msg: '英文名不能为空'},
                {"validator": validateEname, trigger: "blur"}
            ],
            cname: [
                {"validator": ctx.$rules.strBlank, trigger: 'blur', msg: '中文名不能为空'}
            ],
            version: [
                {"validator": ctx.$rules.strBlank, trigger: 'blur', msg: '版本号不能为空'}
            ]
        };

        /**
         * 弹框是否出现
         * @param show 弹框弹出：true、弹框收起：fasle
         */
        function show(show) {
            dialog.value.show = show;
        }

        /**
         * 激活弹窗，使用新增或者修改
         * @param type 新增：0、修改：1
         * @param row  修改时带过来的数据 或 新增的一些默认填写数据
         */
        function awake(type, row = {}) {
            dialog.value.title = type === 0 ? '新增' : '修改';
            dialog.value.type = type;
            form.value = row;
            show(true);
        }

        /**
         * 验证表名是否重复（修改操作时不验证）
         * @param rule     规则
         * @param value    数据值
         * @param callback 回调方法
         */
        function validateEname(rule, value, callback) {
            if (dialog.value.type === 1) {
                callback();
            } else {
                ctx.axios.post("/table/validate/" + value).then((ret) => {
                    if (ret.code === 200) {
                        callback();
                    } else {
                        callback(ret.msg);
                    }
                });
            }
        }

        /**
         * 提交数据新增
         */
        function save() {
            let param = Object.assign({}, form.value);
            ctx.axios.post("/table/save", param).then((ret) => {
                if (ret.code === 200) {
                    ctx.$message({type: 'success', message: ret.msg});
                    show(false);
                    context.emit("search");
                } else {
                    ctx.$message({type: 'warning', message: ret.msg});
                }
            });
        }

        /**
         * 提交数据修改
         */
        function edit() {
            let param = Object.assign({}, form.value);
            ctx.axios.post("/table/edit", param).then((ret) => {
                if (ret.code === 200) {
                    ctx.$message({type: 'success', message: ret.msg});
                    show(false);
                    context.emit("search");
                } else {
                    ctx.$message({type: 'warning', message: ret.msg});
                }
            });
        }

        /**
         * 提交数据
         */
        function submit() {
            ctx.$refs.tableEdit.validate((valid) => {
                if (!valid) {
                    return false;
                }
                if (dialog.value.type === 0) {
                    save();
                } else {
                    edit();
                }
            });
        }

        return {dialog, form, rules, show, awake, submit};
    }
}
</script>
